<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="补贴单号">
              <el-input v-model="params.applySn" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select filterable v-model="params.hospitalId" placeholder="请选择">
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="客户手机号">
              <el-input></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
           <Exprotcomponent
              :params="params"
              url="/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/exportHospitalGoldInstalmentMonth.html"
              type="java"
              permissionJson="AdminHospitalAccountProvider.exportHospitalGoldInstalmentMonth"
            ></Exprotcomponent></el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="applySn" label="补贴单号" align="center" />
        <el-table-column prop="hospitalName" label="医院名称" align="center" />
        <el-table-column prop="createdAt" label="结算时间" align="center" />
        <el-table-column prop="amount" label="实付金币" align="center" />
        <el-table-column prop="instalmentAmount" label="分期实际结算" align="center" />
        <el-table-column prop="totalInstalment" label="总期数" align="center" />
        <el-table-column prop="curInstalment" label="本期期数" align="center" />

        <el-table-column prop="curAmount" label="本期发放额" align="center" />
        <el-table-column prop="instalment" label="剩余期数" align="center" />
        <el-table-column prop="balance" label="剩余待发" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { exportfile, exportfun } from "@/api/commjs/exprot";
import { hospitalDropDown } from "@/api/doctorManage";
export default {
  name: "",
  data() {
    return {
      total: 0,
      tableData: [],
      officeOption: [],
      time: "",
      params: { pageNum: 1, pageSize: 10 }
    };
  },
  created() {
    // this.hlist();
    if (this.$route.query.hospitalId) {
      this.params.hospitalId = this.$route.query.hospitalId;
        this.params.settlementMonth = this.$route.query.settlementMonth;
      this.list();
    }
  },
  watch: {
    time(val) {
      this.params.payStartTime = val ? val[0] : "";
      this.params.payEndTime = val ? val[1] : "";
    }
  },
  methods: {
    searchFn() {
      this.list();
    },
    async list() {
      let res = await exportfun(
        "/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/selectHospitalGoldInstalmentMonth.html",
        this.params,
        0,
        1
      );
      if (res.data.code == 0) {
        this.total = res.data.data.count;
        this.tableData = res.data.data.list;
      }
    },
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "",
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    }
  }
};
</script>
